<template>
  <div class="main ad-manage-edit">
    <el-form class="section" :model="formData" :rules="formRules" size="medium" ref="form" label-width="150px">

      <el-form-item label="订单类型:" prop="orderType">
        <span>{{formData.orderType}}</span>
      </el-form-item>
      <el-form-item label="广告名称:" prop="advertName">
        <el-input v-model="formData.advertName"></el-input>
      </el-form-item>
      <el-form-item label="描述:" prop="description">
        <el-input type="textarea" v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="开始时间:" prop="startTime">
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="开始时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间:" prop="endTime">
        <el-date-picker
          v-model="formData.endTime"
          type="datetime"
          placeholder="结束时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="弹窗背景图片:" prop="popupBackgroundImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="PBImgSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.popupBackgroundImg" :src="formData.popupBackgroundImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="弹窗签到图片:" prop="popupSignImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="PSIMGSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.popupSignImg" :src="formData.popupSignImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="弹窗优惠券图片:" prop="popupCouponImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="PCIMGSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.popupCouponImg" :src="formData.popupCouponImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="弹窗分享图片:" prop="popupShareImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="PShareIMGSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.popupShareImg" :src="formData.popupShareImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="h5分享弹窗图片:" prop="sharePopupImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="SPIMGSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.sharePopupImg" :src="formData.sharePopupImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="签到跳转地址:" prop="jumpType">
        <el-radio v-for="(item, index) in jumpTypes" v-model="formData.jumpType" :label="item.val" :key="index">{{item.name}}</el-radio>
      </el-form-item>
      <el-form-item label="跳转URL:" prop="signSkipUrl" v-if="formData.jumpType === 2">
        <el-input v-model="formData.signSkipUrl" placeholder="http(s)://"></el-input>
      </el-form-item>
      <el-form-item label="分享主标题:" prop="shareMainTitle">
        <el-input v-model="formData.shareMainTitle" placeholder="分享卡片的标题"></el-input>
      </el-form-item>
      <el-form-item label="分享链接:" prop="shareUrl">
        <el-input v-model="formData.shareUrl" placeholder="http(s)://"></el-input>
      </el-form-item>
      <el-form-item label="分享副标题:" prop="shareSubhead">
        <el-input type="textarea" v-model="formData.shareSubhead" placeholder="分享卡片的描述"></el-input>
      </el-form-item>
      <el-form-item label="分享图片:" prop="shareImg">
        <el-upload
          class="avatar-uploader"
          accept="image/*"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :on-success="ShareIMGSuccess"
          :before-upload="beforeUpload">
          <img v-if="formData.shareImg" :src="formData.shareImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="是否启用:">
        <el-switch
          v-model="formData.fixedStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="success" :loading="btnLoading" @click="save">保存</el-button>
        <el-button type="info"  @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {regexp} from '../../../utils/tools'
  import { saveWindowDetail } from '@/api/advert'

  export default {
        name: "edit",
      data(){
        return {
          positionList: [], // 广告位列表
          jumpTypes: [
            { name: '无', val: 1},
            { name: 'URL', val: 2}
          ],    // 跳转类型
          pageTypes: [
            { name: '商品', val: 1},
            { name: '套餐', val: 2},
            { name: '活动', val: 5}
          ],    // 内页类型

          btnLoading: false,
          formData: {
            orderType: 0,
            fixedStatus:0,
            advertName:"",
            startTime:"",
            endTime:"",
            description:"",
            popupBackgroundImg:"",
            popupSignImg:"",
            popupCouponImg:"",
            popupShareImg:"",
            sharePopupImg:"",
            signSkipUrl:"",
            shareMainTitle:"",
            shareSubhead:"",
            shareImg: "",
            jumpType: 1,
            shareUrl: ''
          },
          formRules: {
            advertName: [
              {required: true, message: '不能为空', trigger: 'change'},
              {max: 100, message: '不能超过100字符', trigger: 'change'},
            ],
            startTime: [{ required: true, message: '不能为空', trigger: 'change' }],
            endTime: [{ required: true, message: '不能为空', trigger: 'change' }],
            popupBackgroundImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            popupSignImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            popupCouponImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            popupShareImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            sharePopupImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            signSkipUrl: [
              {required: true, message: '不能为空', trigger: 'change'},
              {pattern: regexp.url, message: '格式错误', trigger: 'change'}
            ],
            shareMainTitle: [{ required: true, message: '不能为空', trigger: 'change' }],
            shareSubhead: [{ required: true, message: '不能为空', trigger: 'change' }],
            shareImg: [{ required: true, message: '不能为空', trigger: 'change' }],
            shareUrl: [
              {required: true, message: '不能为空', trigger: 'change'},
              {pattern: regexp.url, message: '格式错误', trigger: 'change'}
            ]
          }
        }
      },
    created() {
          this.initDetail()
    },
    computed: {
      isEdit() {
        return this.id && this.$route.name === 'adManageEdit';
      },
      // 广告类型
      adType() {
        let result = this.positionList.filter(item => item.id===this.formData.aid);
        if(result && result.length){
          return result[0].adType
        }
        return '';
      }
    },
    methods: {

       //  获取内容
      initDetail() {
        let id = this.$route.query.id
        let detail = JSON.parse(window.localStorage.getItem('38Detail'))
        if (detail.signSkipUrl) {
          detail.jumpType = 2
        } else if (detail.signSkipUrl ===''){
          detail.jumpType = 1

        }
        if (detail) {
            id === detail.id ? this.formData = detail : ''
        } else {
          window.localStorage.removeItem('38Detail')
        }
      },


       // 上传成功后返回图片地址

      // 弹窗
      PBImgSuccess(res, file) {
        this.formData.popupBackgroundImg = this.replaceImgUrl(res.filePath);
      },

      // 签到
      PSIMGSuccess(res, file) {
        this.formData.popupSignImg = this.replaceImgUrl(res.filePath);
      },

      // 优惠券
      PCIMGSuccess(res, file) {
        this.formData.popupCouponImg = this.replaceImgUrl(res.filePath);
      },

      // 弹窗分享
      PShareIMGSuccess(res, file) {
        this.formData.popupShareImg = this.replaceImgUrl(res.filePath);
      },

      // h5 分享
      SPIMGSuccess(res, file) {
        this.formData.sharePopupImg = this.replaceImgUrl(res.filePath);
      },

      // 分享
      ShareIMGSuccess(res, file) {
        this.formData.shareImg = this.replaceImgUrl(res.filePath);
      },

          // 提交内容
          save() {
            this.$refs.form.validate(valid => {
              if (!valid) {
                return false;
              }
              if(this.formData.jumpType===1){
                this.formData.signSkipUrl = ''
              }
              saveWindowDetail(this.formData).then(res => {
                this.$message({
                  message: res.message || res.msg,
                  type: 'success'
                })
              })
            })
          },
    }

    }
</script>

<style scoped>

</style>
